import "taro-ui/dist/style/components/tabs.scss"
import React, { useCallback, useEffect, useState } from "react"
import { AtTabs, AtTabsPane } from 'taro-ui'
import { AtTabsProps } from "taro-ui/types/tabs"

interface Props extends AtTabsProps {
    //重写类型
    onClick: (val: number) => void
    paneList: { content: any }[]
}
const TTas: React.FC<Props> = (props) => {
    let { current, onClick, tabList, paneList, ...config } = props
    const [val, setVal] = useState<number>(current)
    const valClick = useCallback((val: number) => {
        setVal(val)
    }, [])
    useEffect(() => {
        val !== undefined && !!onClick && onClick(val)
    }, [val])

    return <AtTabs current={current} tabList={tabList} onClick={valClick}  {...config}>
        {
            props.paneList[0] && props.paneList.map((item, index) => {
                return <AtTabsPane current={current} index={index} key={index}>
                    {item.content}
                </AtTabsPane>
            })
        }
    </AtTabs >
}
export default TTas